<template>
	<view class="context">
		<!-- tab -->
		<view class="box">
			<view class="box-item" v-for="(item,index) in data" :key="index" :style="customStyle">
				<view @click="changeCurrent(index)" :class="{'box-item-select':current == index}">{{item.name}}</view>
				<view :class="{'border-bottom':current == index}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0
			}
		},
		props:{
			data:{
				type:Array
			},
			customStyle:{
				tyle:Object
			}
		},
		methods: {
			changeCurrent(index){
				this.current = index
				this.$emit("change",index)
			}
		},
		onReady() {},
		onLoad: function(v) {}
	}
</script>

<style lang="scss">
	.box{
		display: flex;
		color: #999;
		.box-item{
			font-size: 32rpx;
			margin:0 25rpx 0 25rpx;
			position: relative;
			.box-item-select{
				font-size: 36rpx;
				font-weight: bold;
				color: #222;
			}
			.border-bottom{
				position: absolute;
				top: 35rpx;
				width: 100%;
				height: 8rpx;
				background: #2A96EE;
				border-radius: 2rpx;
				opacity: 0.8;
			}
		}
	}

</style>
